<template>
  <view :data-theme="theme()" :class="theme() || ''">
    <view class="pay-success" v-if="!loadding">
      <view class="success-icon d-c-c d-c">
        <text class="iconfont icon-queren"></text>
        <text class="name">{{ $t('order.payment_success') }}</text>
      </view>
      <view class="success-price d-c-c">
        HK$<text class="num">{{ detail.payPrice }}</text>
      </view>
      <view class="order-info mt30 f28" v-if="detail.pointsBonus > 0">
        <view class="d-b-c p20 border-b">
          <text class="gray9">{{ $t('order.points_reward') }}</text>
          <text class="gray3">{{ detail.pointsBonus }}</text>
        </view>
      </view>
      <view class="success-btns d-b-c">
        <button type="default" class="flex-1 mr10" @click="goHome">
          {{ $t('order.back_home') }}
        </button>
        <button type="1" class="flex-1 ml10" @click="goMyorder">
          {{ $t('order.my_orders') }}
        </button>
      </view>
      <!--{{$t('order.recommended')}}-->
      <view>
        <recommendProduct :location="30"></recommendProduct>
      </view>
    </view>
  </view>
</template>

<script>
import recommendProduct from "@/components/recommendProduct/recommendProduct.vue";
export default {
  components: {
    recommendProduct,
  },
  data() {
    return {
      /*是否加载完成*/
      loadding: true,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      /*订单id*/
      orderId: 0,
      /*订单详情*/
      detail: {},
    };
  },
  onLoad(e) {
    this.orderId = e.orderId;
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t('order.payment_success')
    })
  },
  mounted() {
    uni.showLoading({
      title: this.$t('order.loading'),
    });
    /*获取订单详情*/
    this.getData();
  },
  methods: {
    /*获取订单详情*/
    getData() {
      let self = this;
      self._post(
        "user/order/paySuccessDetail",
        {
          orderId: self.orderId,
        },
        function (res) {
          self.detail = res.data;
          self.loadding = false;
          uni.hideLoading();
          /*显示表单*/
          if (res.data.showTable) {
            self.showSuccess(
              self.$t('order.order_info_reminder'),
              function () {
                self.gotoPage(
                  "/pages/order/order-detail?orderId=" + res.data.showOrderId
                );
              }
            );
          }
        }
      );
    },
    /*返回首页*/
    goHome() {
      this.gotoPage("/pages/index/index");
    },
    /*返回我的订单*/
    goMyorder() {
      this.gotoPage("/pages/order/myorder");
    },
  },
};
</script>

<style lang="scss">
.pay-success .success-icon {
  display: flex;
  padding: 60rpx;
}

.pay-success .success-icon .iconfont {
  padding: 30rpx;
  background: #04be01;
  border-radius: 50%;
  font-size: 80rpx;
  color: #ffffff;
}

.pay-success .success-icon .name {
  margin-top: 20rpx;
  font-size: 30rpx;
}

.pay-success .success-price {
  font-size: 36rpx;
}

.pay-success .success-price .num {
  font-size: 60rpx;
  font-weight: bold;
}

.pay-success .order-info {
  background: #ffffff;
}

.pay-success .success-btns {
  margin-top: 50rpx;
  padding: 30rpx;
}

.pay-success .success-btns button {
  font-size: 30rpx;
}

.pay-success .success-btns button[type="default"] {
  border: 1px solid #04be01;
  color: #04be01;
}

.pay-success .success-btns button[type="1"] {
  @include background_color("background_color");
  @include font_color("text_color2");
}
</style>
